import React from 'react'

// 高阶组件
const withMouse = (Component) => {
  class withMouseComponent extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        x: 0,
        y: 0
      }
    }

    handleMouseMove = (event) => {
      this.setState({
        x: event.clientX,
        y: event.clientY
      })
    }

    render() {
      return (
        <div style={{ height: '500px' }} onMouseMove={this.handleMouseMove}>
          <Component {...this.props} mouse={this.state}></Component>
        </div>
      )
    }
  }

  return withMouseComponent
}

const App = (props) => {
  const a = props.a
  const {x,y} = props.mouse
  return (
    <div style={{height: '500px'}}>
      <h1>The mouse position is ({x}, {y})</h1>
      <p>{a}</p>
    </div>
  )
}

export default withMouse(App)
